<template>
  <tree-select
    class="vegetable"
    ref="cateSelect"
    v-model="cateSelect"
    :options="cateList"
    :clearable="false"
    :disable-branch-nodes="true"
    no-options-text="暂无数据"
    no-sub-options-text="暂无数据"
    placeholder="请选择图层"
    @select="handleSelect"
  ></tree-select>

</template>

  
<script setup>
import TreeSelect from "vue3-treeselect";
import "vue3-treeselect/dist/vue3-treeselect.css";
import { onMounted, ref} from "vue";
import { emitter } from "@/utils/eventBus";
import  treeList  from '../../../assets/tree.json';


const cateSelect = ref(null);
const cateList = ref([]);
cateList.value.push(treeList.data) 

console.log(cateList.value);

const handleSelect = (node) => {
  emitter.emit('select', node);
};
</script>

  
<style lang="scss" scoped>
.vegetable {
  width: 270px;
  margin-right: 20px;
  background: unset;
  
}
::v-deep .vue-treeselect__control {
      background: rgba(16, 32, 46, 0.8);
      border: 1px solid #ccc;
      &:hover {
        border: 0.5px solid #409eff!important;
      }
     }

::v-deep .vegetable .vue-treeselect__control {
  height: inherit;
  
}
::v-deep .vue-treeselect__single-value {
  color: #fff;
}

// ::v-deep .el-tree-node__content {
//   background: rgba(16, 32, 46, 0.8)!important;
// }


</style>
